/* ==========================================================================
   Adventio — Color tokens
   Palette concept: high-altitude expedition. Pine green (trust, nature) as the
   product's spine, warm clay/terracotta (Andean earth, energy) for accents,
   warm stone neutrals so dense data screens never feel clinical.
   Base ramps (--pine-*, --clay-*, --stone-*) + semantic aliases.
   ========================================================================== */
:root {
  /* ---------- Pine (primary / brand green) ---------- */
  --pine-50:  #ECF6F2;
  --pine-100: #D2EBE2;
  --pine-200: #A7D7C8;
  --pine-300: #72BCA8;
  --pine-400: #3F9C85;
  --pine-500: #1E7E68;
  --pine-600: #146454;
  --pine-700: #114F44;
  --pine-800: #103E37;
  --pine-900: #0E322C;
  --pine-950: #08211D;

  /* ---------- Clay (accent / terracotta) ---------- */
  --clay-50:  #FBF1EB;
  --clay-100: #F6DDCF;
  --clay-200: #ECBBA1;
  --clay-300: #E09671;
  --clay-400: #D5734B;
  --clay-500: #C75B39;
  --clay-600: #A8462A;
  --clay-700: #883722;
  --clay-800: #6E2F20;
  --clay-900: #5B291E;

  /* ---------- Stone (warm neutral) ---------- */
  --stone-0:   #FFFFFF;
  --stone-50:  #F8F7F4;
  --stone-100: #F1EFE9;
  --stone-150: #EAE7DF;
  --stone-200: #E2DED4;
  --stone-300: #D1CCBF;
  --stone-400: #B0AA9B;
  --stone-500: #8A8474;
  --stone-600: #6B655A;
  --stone-700: #514C43;
  --stone-800: #393530;
  --stone-900: #262320;
  --stone-950: #16140F;

  /* ---------- Sky (info blue, used sparingly) ---------- */
  --sky-50:  #ECF3FA;
  --sky-100: #D4E5F4;
  --sky-300: #7FB0DD;
  --sky-500: #2D6FB3;
  --sky-600: #235C97;
  --sky-700: #1C4A7B;

  /* ---------- Amber (warning) ---------- */
  --amber-50:  #FBF2DF;
  --amber-100: #F6E2B4;
  --amber-300: #ECC25A;
  --amber-500: #D99100;
  --amber-600: #B57700;
  --amber-700: #8E5E00;

  /* ---------- Rust (danger) ---------- */
  --rust-50:  #FBECEA;
  --rust-100: #F6D2CD;
  --rust-300: #E89187;
  --rust-500: #D14A3D;
  --rust-600: #B23628;
  --rust-700: #8E2A1F;

  /* ---------- Fern (success — distinct from pine) ---------- */
  --fern-50:  #E9F6EC;
  --fern-100: #CCEBD4;
  --fern-300: #74C690;
  --fern-500: #1F9E5B;
  --fern-600: #167F48;
  --fern-700: #14653A;

  /* ======================================================================
     SEMANTIC ALIASES — reference these in product code, not the ramps above
     ====================================================================== */

  /* Surfaces (light content area) */
  --surface-app:        var(--stone-50);    /* page background */
  --surface-card:       var(--stone-0);     /* cards, panels, modals */
  --surface-raised:     var(--stone-0);     /* popovers, menus */
  --surface-sunken:     var(--stone-100);   /* wells, table zebra, insets */
  --surface-hover:      var(--stone-100);   /* row / item hover */
  --surface-active:     var(--stone-150);   /* pressed / selected row */
  --surface-disabled:   var(--stone-100);

  /* Surfaces (dark navigation) */
  --surface-nav:        var(--pine-950);    /* sidebar / dark chrome */
  --surface-nav-raised: #0C2A24;            /* nav hover / nested */
  --surface-nav-active: var(--pine-800);    /* active nav item */

  /* Brand tints */
  --surface-brand-soft: var(--pine-50);     /* selected, brand-tinted zones */
  --surface-accent-soft:var(--clay-50);

  /* Text on light */
  --text-strong:   var(--stone-950);   /* headings */
  --text-default:  var(--stone-900);   /* body */
  --text-muted:    var(--stone-600);   /* secondary, labels */
  --text-subtle:   var(--stone-500);   /* placeholder, captions */
  --text-disabled: var(--stone-400);
  --text-inverse:  var(--stone-0);     /* text on dark/brand fills */
  --text-link:     var(--pine-600);
  --text-brand:    var(--pine-600);
  --text-accent:   var(--clay-600);

  /* Text on dark nav */
  --text-nav-strong: #F4F6F3;
  --text-nav:        #B8C9C2;          /* default nav label */
  --text-nav-muted:  #7A938B;          /* nav section headers */

  /* Borders & dividers */
  --border-subtle:  var(--stone-150);  /* hairlines, table rows */
  --border-default: var(--stone-200);  /* card edges, inputs */
  --border-strong:  var(--stone-300);  /* emphasized dividers */
  --border-nav:     #103C33;           /* dividers on dark nav */
  --border-brand:   var(--pine-500);
  --border-focus:   var(--pine-500);

  /* Interactive — primary (pine) */
  --action-primary:        var(--pine-600);
  --action-primary-hover:  var(--pine-700);
  --action-primary-active: var(--pine-800);
  --action-primary-soft:   var(--pine-50);
  --on-action-primary:     var(--stone-0);

  /* Interactive — accent (clay), for high-energy CTAs */
  --action-accent:        var(--clay-500);
  --action-accent-hover:  var(--clay-600);
  --action-accent-active: var(--clay-700);
  --on-action-accent:     var(--stone-0);

  /* Focus ring */
  --ring-focus: 0 0 0 3px color-mix(in oklch, var(--pine-500) 32%, transparent);
  --ring-danger: 0 0 0 3px color-mix(in oklch, var(--rust-500) 30%, transparent);

  /* ---------- Status: foreground / background / border triplets ---------- */
  --status-success-fg:  var(--fern-700);
  --status-success-bg:  var(--fern-50);
  --status-success-bd:  var(--fern-100);
  --status-success-dot: var(--fern-500);

  --status-warning-fg:  var(--amber-700);
  --status-warning-bg:  var(--amber-50);
  --status-warning-bd:  var(--amber-100);
  --status-warning-dot: var(--amber-500);

  --status-danger-fg:   var(--rust-700);
  --status-danger-bg:   var(--rust-50);
  --status-danger-bd:   var(--rust-100);
  --status-danger-dot:  var(--rust-500);

  --status-info-fg:     var(--sky-700);
  --status-info-bg:     var(--sky-50);
  --status-info-bd:     var(--sky-100);
  --status-info-dot:    var(--sky-500);

  --status-neutral-fg:  var(--stone-700);
  --status-neutral-bg:  var(--stone-100);
  --status-neutral-bd:  var(--stone-200);
  --status-neutral-dot: var(--stone-500);

  --status-brand-fg:    var(--pine-700);
  --status-brand-bg:    var(--pine-50);
  --status-brand-bd:    var(--pine-100);
  --status-brand-dot:   var(--pine-500);

  --status-accent-fg:   var(--clay-700);
  --status-accent-bg:   var(--clay-50);
  --status-accent-bd:   var(--clay-100);
  --status-accent-dot:  var(--clay-500);

  /* ---------- Data-viz categorical sequence ---------- */
  --viz-1: var(--pine-500);
  --viz-2: var(--clay-500);
  --viz-3: var(--sky-500);
  --viz-4: var(--amber-500);
  --viz-5: var(--fern-500);
  --viz-6: var(--pine-300);
}